import React from "react";
import { Note } from "../../service/staff";
import "./Keyboard.css";

interface KeyboardProps {
    onClick: (note: Note) => void;
}



export class Keyboard extends React.Component<KeyboardProps, {}> {

    render = () => {

        return <>
            <div id="keyboard-white">
                <div className="key-white" onClick={() => this.props.onClick('C')}></div>
                <div className="key-white" onClick={() => this.props.onClick('D')}></div>
                <div className="key-white" onClick={() => this.props.onClick('E')}></div>
                <div className="key-white" onClick={() => this.props.onClick('F')}></div>
                <div className="key-white" onClick={() => this.props.onClick('G')}></div>
                <div className="key-white" onClick={() => this.props.onClick('A')}></div>
                <div className="key-white" onClick={() => this.props.onClick('B')}></div>
            </div>
            <div className="key-black key-black1"></div>
            <div className="key-black key-black2"></div>
            <div className="key-black key-black3"></div>
            <div className="key-black key-black4"></div>
            <div className="key-black key-black5"></div>
        </>
    }

}